<template>
	<scroll-view class="scrView" :scroll-y="true" :lowerThreshold="50" @scrolltolower="scrolltolowerHandle">
		<view class="" v-for="(f, i) in followList">
			<view class="follow-item">
				<!-- {{source}} -->
				<view class="item-author">
					<image class="author-avatar" :src="f.u.p" mode="widthFix"></image>
					<view class="author-info">
						<view class="author-text">
							<view class="author-name">
								{{ f.u.n }}
							</view>
							<view class="author-lvl">
								lv.{{ f.u.lvl }}
							</view>
						</view>
						<view class="author-fans">
							{{ f.u.followers_count_text }} · {{ f.u.recipes_count_text }}
						</view>
					</view>
					<view class="follow-btn">
						关注
					</view>
				</view>

				<image class="content-img" :src="f.img" mode="aspectFill"></image>
				<view class="favorite-wrap">
					<view class="collect-avatar" :class="{fix: i == 0}" v-for="(u, i) in f.collect_users" :key="i">
						<image :src="u.p" mode="widthFix"></image>
					</view>
					<view class="collect-count">
						{{ f.collect_count_text }}
					</view>
				</view>
				<view class="item-name">
					{{ f.n }}
				</view>
			</view>
		</view>
		<u-gap height="30" bgColor="#fff"></u-gap>
		<LoadingBar></LoadingBar>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		http
	} from '../untils/http.js'
	import LoadingBar from '../components/LoadingBar.vue'

	const url = 'home/ffeeds/0/20';

	export default {
		name: "FollowFeeds",
		data() {
			return {
				followList: [],
				loading: false
			};
		},
		components: {
			LoadingBar
		},
		created() {
			console.log('关注页面出生了');
			// this.getDataFromServerData()
			http(url).then(res => {
				// console.log('关注页面自己发送网络请求拿到的数据', res.result.rfs);
				this.followList = res.result.rfs
				console.log(this.followList)
				this.$nextTick(() => {
					this.loading = false
				})
			})
		},
		methods: {
			getDataFromServerData(cb) {
				console.log('重新请求数据');
				let timeStamp = new Date().getTime()
				http(url + '?timestamp=' + timeStamp).then((res) => {
					this.followList = res.result.rfs
					cb && this.$nextTick(cb)
				})
			},
			getFollowsFromSerever() {
				this.loading = true
				let url = 'home/ffeeds/' + this.followList.length + '/20'

				// 第一次网络请求，需要请求topics
				// 后续加载不需要请求
				http(url).then(res => {

					this.followList = [...this.followList, ...res.result.rfs]
					console.log(this.followList);

					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			scrolltolowerHandle() {

				if (!this.loading) {
					console.log('滑到底部');
					this.getFollowsFromSerever()
				}
			}
		}
	}
</script>

<style lang="scss">
	.scrView {
		position: fixed;
		top: 77px;
		bottom: 50px;
	}

	.follow-item {
		padding: 4px 0 8px;
	}

	.item-author {
		position: relative;
		display: flex;
		align-items: center;
		padding: 4px;
		max-width: 750rpx;
		box-sizing: border-box;

		.author-avatar {
			display: block;
			width: 32px;
			height: 32px;
			border-radius: 999px;
		}
	}

	.author-info {
		display: flex;
		flex-direction: column;

		.author-text {
			display: flex;
			align-items: center;
			margin-left: 2px;

			.author-name {
				margin-left: 4px;
				font-size: 12px;
				font-weight: 700;
			}

			.author-lvl {
				// margin-left: 1px;
				font-style: italic;
				font-weight: 700;
				font-size: 18px;
				transform: scale(.5);
				color: #fc0;
			}
		}

		.author-fans {
			margin-left: 5px;
			font-size: 8px;
			color: #969696;
		}
	}

	.follow-btn {
		position: absolute;
		right: 10px;
		width: 50px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		font-size: 10px;
		font-weight: 700;
		background-color: #ffc535;
		border-radius: 999px;
	}

	.content-img {
		display: block;
		width: 750rpx;
	}

	.favorite-wrap {
		display: flex;
		padding: 8px 4px;

		.collect-avatar {
			position: relative;
			margin-left: -4px;
			width: 14px;
			height: 14px;
			border-radius: 999px;
			background-color: #fff;
			border: 2px solid #000;
			overflow: hidden;

			&.fix {
				margin-left: 0;
			}

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.collect-count {
			margin-left: 4px;
			font-size: 12px;
			font-weight: 700;
		}
	}

	.item-name {
		padding: 0 4px;
		margin-top: 4px;
		font-size: 14px;
		font-weight: 700;
	}
</style>